Update chakra-ui monorepo (major) #472

renovate · 2022-08-07T18:07:59Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@chakra-ui/icons (source)	`1.1.1` -> `2.2.4`
@chakra-ui/react (source)	`1.8.1` -> `3.5.1`

Release Notes

chakra-ui/chakra-ui (@chakra-ui/icons)

`v2.2.4`

`v2.2.3`

`v2.2.2`

`v2.2.1`

`v2.2.0`

`v2.1.1`

Compare Source

Patch Changes

Updated dependencies
[3aaf0c3b1]:
- @chakra-ui/icon @3.2.0

`v2.1.0`

Compare Source

Minor Changes

754d9d4f4
Thanks @segunadebayo! - To improve support
for the App Router, all components and hooks are exported with the
"use client" directive.

Patch Changes

Updated dependencies
[754d9d4f4]:
- @chakra-ui/icon @3.1.0

`v2.0.19`

Compare Source

Patch Changes

e7bd872d0
Thanks @segunadebayo! - Fix issue where
SpinnerIcon id causes accessibility violation
Updated dependencies []:
- @chakra-ui/icon @3.0.16

`v2.0.18`

Patch Changes

#7506
68ceb28ae
Thanks @segunadebayo! - Fix issues with TS
5.0
Updated dependencies []:
- @chakra-ui/icon @3.0.16

`v2.0.17`

Patch Changes

ddbb1b4c4
Thanks @segunadebayo! - Bump all packages
#7216
08e3ffc4a
Thanks @segunadebayo! - Fixed issue where
ReactIcon was not exported
Updated dependencies
[ddbb1b4c4]:
- @chakra-ui/icon @3.0.16

`v2.0.16`

Compare Source

Patch Changes

Updated dependencies
[c483d859d]:
- @chakra-ui/icon @3.0.15

`v2.0.15`

Compare Source

Patch Changes

#7154
2d7398a01
Thanks @segunadebayo! - ## All components

Improved the bundling setup for all components.
- Switched to the .mjs file extension for correct ESM behavior
- Switched to the latest tsup will uses automatic JSX runtime detection
  removing the need for manually inject classic React import
- Moved tsup config to package.json since it's very minimal
- Removed clean-package.config.json in favor of the package.json property
- Fixed issue where Storybook addon (dark mode and RTL) was not working
Updated dependencies
[2d7398a01]:
- @chakra-ui/icon @3.0.14

`v2.0.14`

Compare Source

Patch Changes

37b7a130a
Thanks @segunadebayo! - Add ReactIcon to
align with Figma UI Kit
Updated dependencies []:
- @chakra-ui/icon @3.0.13

`v2.0.13`

Compare Source

Patch Changes

Updated dependencies
[8c2af79fa]:
- @chakra-ui/icon @3.0.13

`v2.0.12`

Compare Source

Patch Changes

#6945
75eaba929
Thanks @anddoutoi! - Fix issue where using
@chakra-ui/react in a TypeScript project with "type": "module" in
package.json and "moduleResolution": "Node16" in tsconfig.json cannot
find the types.
Updated dependencies
[75eaba929]:
- @chakra-ui/icon @3.0.12

Patch Changes

Updated dependencies
[3e1b3f6b6]:
- @chakra-ui/icon @3.0.10

`v2.0.9`

Patch Changes

#6508
445661955
Thanks @anubra266! - - Initial release of
react hooks
- Refactor all packages to reduce bundle size
- Refactor code for proper prop doc generatation
Updated dependencies
[445661955]:
- @chakra-ui/icon @3.0.9

`v2.0.7`

Patch Changes

Updated dependencies []:
- @chakra-ui/icon @3.0.7

`v2.0.6`

Patch Changes

Force new release
Updated dependencies []:
- @chakra-ui/icon @3.0.6

`v2.0.5`

Patch Changes

#6356
1839e22eb
Thanks @segunadebayo! - - Force release due
to change in build configuration
- Update package main and module entries
Updated dependencies
[1839e22eb]:
- @chakra-ui/icon @3.0.5

`v2.0.4`

Compare Source

Patch Changes

Updated dependencies []:
- @chakra-ui/icon @3.0.4

`v2.0.3`

Compare Source

Patch Changes

Updated dependencies []:
- @chakra-ui/icon @3.0.3

`v2.0.2`

Compare Source

Patch Changes

06f29f8cd
Thanks @segunadebayo! - Bump all packages
to resolve deps issues
Updated dependencies
[06f29f8cd]:
- @chakra-ui/icon @3.0.2

`v2.0.1`

Compare Source

Patch Changes

e7bd872d0
Thanks @segunadebayo! - Fix issue where
SpinnerIcon id causes accessibility violation
Updated dependencies []:
- @chakra-ui/icon @3.0.16

`v2.0.0`

Compare Source

Major Changes

#5879
c390af485
Thanks @TimKolberger! - Bump all packages
to next major for Chakra UI version 2.

#5989
ed692c0ae
Thanks @TimKolberger! - Omit src
directory from being published to npm

#5882
41b3119f5
Thanks @TimKolberger! - Bump peer
dependency to React and ReactDOM to >=18

Patch Changes

Updated dependencies
[c390af485,
ed692c0ae,
41b3119f5]:
- @chakra-ui/icon @3.0.0

`v1.1.7`

Compare Source

Patch Changes

e1fe48cbe
Thanks @TimKolberger! - Bumped patch
version for every package to fix release process. Root cause was a bug in our
CI configuration.
Updated dependencies
[e1fe48cbe]:
- @chakra-ui/icon @2.0.5

`v1.1.6`

Compare Source

`v1.1.5`

Compare Source

Patch Changes

#5536
a503acabe
Thanks @TimKolberger! - Bumped patch
version for every package to fix release process.
Updated dependencies
[a503acabe]:
- @chakra-ui/icon @2.0.3

`v1.1.4`

Compare Source

`v1.1.3`

Compare Source

Patch Changes

Updated dependencies []:
- @chakra-ui/icon @2.0.1

`v1.1.2`

Compare Source

Patch Changes

Updated dependencies
[17400aff6]:
- @chakra-ui/icon @2.0.0

chakra-ui/chakra-ui (@chakra-ui/react)

`v3.5.1`

Compare Source

Patch Changes

34d46e3
Thanks @segunadebayo! - - Button: Fix
issue where button is not disabled when loading props is passed
- ColorPicker, HoverCard, Tooltip: Fixed intermittent placement shifts
  caused by updates to the data-placement attribute
- Snippets / Alert: Deprecate the Alert snippet in favor of using the
  Alert component directly from @chakra-ui/react.

`v3.5.0`

Compare Source

Minor Changes

30a12d0
Thanks @segunadebayo! - - Native Select
- Fix issue where disabled and invalid props were not being passed to the
  NativeSelectField component.
- Persist error focus ring when invalid prop is set.
- Fix issue where native select isn't readable in dark mode for Windows/Linux
  devices.
- [New] Loader: Add new Loader and LoaderOverlay components.
- [New] Button Group: Add new ButtonGroup component similar to v2 for
  grouping similar buttons.
- Button: Add loading and loadingText props to the Button component.
- Snippets / Menu: Refactor checkbox item to fix rendering
- Snippets / Button: Removed the button snippet in favor of built-in
  component.

`v3.4.0`

Compare Source

Minor Changes

375e05f
Thanks @segunadebayo! - - [New]
Presence: Add component to animate an element using css animation, and
control the mount/unmount behavior

Patch Changes

882c7f6
Thanks @segunadebayo! - - Separator:
Fix issue where aria-orientation was missing in the DOM and orientation
was added instead.
- FileUpload
  - Resolved an issue where form-related components reset despite the reset
    event being cancelled.
  - Fixed a brief warning display when a new image file is added to the
    preview.
  - Enhanced click detection for the dropzone and added support for the
    disableClick prop.
4c885df
Thanks @segunadebayo! - - Button, Icon
Fix issue where button and icon doesn't export props providers
b39ea43
Thanks @segunadebayo! - System: Fix
issue where render times feels slower compared to v2 due to the global style
computation in the provider component. Now, it is much faster.
See Discussion

`v3.3.3`

Compare Source

Patch Changes

9c55f21
Thanks @segunadebayo! - Fix issue where
icon sizes doesn't work anymore

`v3.3.2`

Compare Source

Patch Changes

855bb29
Thanks @segunadebayo! - - Icon:
Refactor icon recipe size=inherit to allow for composition with button
- Snippet / Tooltip: Set portalled to true by default
#9470
4bd9f8d
Thanks @lcswillems! - - Menu, Select: Use
the same semantic token for select _highlighted state
- Toast: Fix issue where toast close trigger was not visible
e4fe984
Thanks @segunadebayo! - Fix issue where
using <Icon as={...} /> throws an error, forcing users to use the asChild
approach
e506044
Thanks @segunadebayo! - Fix issue where
factory shows a warning React 19 due to accessing child.ref

`v3.3.1`

Compare Source

Patch Changes

0fc040a
Thanks @segunadebayo! - HoverCard,
Tooltip: Resolved an issue where the controlled open state could become
inconsistent during the opening or closing phases.
1439548
Thanks @segunadebayo! - Fix issue where
useRecipe and useSlotRecipe returns never when key does not match
built-in recipe.

`v3.3.0`

Compare Source

Minor Changes

#9437
791bcec
Thanks @segunadebayo! - ### Added
- Clipboard: Introduced Clipboard.ValueText to display clipboard
  content.
- FileUpload:
  - Added preventDropOnDocument to block file drops on the document when the
    file upload component is active.
  - Added setClipboardFiles to the API for setting files from clipboard
    data.
- Progress: Added support foronValueChange and defaultValue.
- Tabs, Menu, Combobox: Added navigate property for custom router
  navigation when selections render as links.
- QrCode:
  - Added support for onValueChange and defaultValue.
  - Added QrCode.DownloadTrigger to enable QR code image downloads.

Fixed

Collapsible: Fixed a bug where the opening animation replayed when an
open collapsible was re-rendered.
Dialog, Popover: Resolved an issue causing dialogs or popovers to close
if the focused element was removed from the DOM.
FileUpload: Fixed a bug causing the hidden input to desync from accepted
files.
Menu, Popover: Fixed inconsistent interaction detection outside the
component when the trigger was inside a scrollable container.
Pagination: Corrected an issue where the page range returned an
incorrect end value when pageSize exceeded count.
QRCode: Fixed getDataUrl to generate a properly sized QR code.

#9437
791bcec
Thanks @segunadebayo! - Add new QRCode
component for converting text and links to QR codes.

import { QrCode } from "@&#8203;chakra-ui/react"

export const QrCodeWithoutSnippet = () => {
  return (
    <QrCode.Root value="..." size="md">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

Patch Changes

d3f1c19
Thanks @segunadebayo! - Fix issue where
htmlWidth and htmlHeight doesn't work in Image or chakra.image
elements.
f32cb4a
Thanks @segunadebayo! - Improve typesafety
for layer styles to support common shorthands like bg, bgColor, bgImage
b11587b
Thanks @segunadebayo! - Fix compound
variant matching not working with colorPalette prop

`v3.2.5`

Compare Source

Patch Changes

d195ced
Thanks @segunadebayo! - - Snippets /
Pagination: Fix issue where pagination page text renders incorrectly when
the pageSize is greater than the count value with format=long
- Snippets / InputGroup: Improve typings for children prop to prevent TS
  errors
609855d
Thanks @segunadebayo! - Improve type-safety
in useRecipe and useSlotRecipe hooks
636c61f
Thanks @segunadebayo! - useMediaQuery:
Fix issue where partial media queries like aspect-ratio < 1 doesn't return
the correct result.

Good to know: Partial media queries like aspect-ratio < 1 resolves to
aspect-ratio < 1 / 1 in the browser.
b1c3f74
Thanks @segunadebayo! - Fix issue where
composing Input component throws asChild React HTML prop warning.
e7fddd5
Thanks @segunadebayo! - Fix issue where
mergeConfigs does not override functions
55258da
Thanks @segunadebayo! - - FileUpload:
Resolved an issue where the accept attribute wasn’t applied to the hidden
input.
- NumberInput: Fixed issue where the input event wasn’t triggered on the
  first click of the increment/decrement controls.

`v3.2.4`

Compare Source

Patch Changes

df0ac52
Thanks @segunadebayo! - Fix issue where
component hook props (like UseCheckboxProps, UseCheckboxGroupProps, etc.)
are not exported.
be8f80a
Thanks @segunadebayo! - Fix issue where
chakra.x factory component props throws TS error in React 19

`v3.2.3`

Compare Source

Patch Changes

d821ab5
Thanks @segunadebayo! - Fix issue where
responsive semantic tokens doesn't work as expected.

`v3.2.2`

Compare Source

Patch Changes

7234d75
Thanks @segunadebayo! - - Slider
- Add DraggingIndicator component to show an element only while dragging
- Fix issue where slider marks were not styled correctly in vertical
  orientation
- Menu: Update recipe to use --available-height css variable to keep the
  menu's height within the available space
- System: Fixed issue where exporting withRootProvider would result in
  type error
- Snippets / Slider
  - Move MarkerGroup into the Control component
  - Remove hardcoded margin values in favor of recipes and
    data-has-mark-label attribute

`v3.2.1`

Compare Source

Patch Changes

#9240
561ccc0
Thanks @Pagebakers! - - System: Fix issue
where exporting withProvider and withContext would result in type error
- Timeline: Fix issue where TimelineTitle was missing from the export
- Tabs: Fix issue where useTabs and useTabsContext were not exported
- Snippets / ColorPicker: Fix flex direction of ColorPickerChannelInputs
  and ColorPickerChannelSliders

`v3.2.0`

Compare Source

Minor Changes

#9130
e5880fb
Thanks @segunadebayo! - - [Preview] Add new
ColorPicker component to allow users pick a color in hsl, rgb, hsb formats.
- Add new ColorSwatch component to preview a color.
- Fix issue where mergeConfigs mutates the underlying configs passed to it.

`v3.1.2`

Compare Source

Patch Changes

65952d7
Thanks @segunadebayo! - - General: Fix
issue where value change types were not re-exported from Ark UI
- Layer Style: Fix issue where fill.surface layer style doesn't render
  the correct styles
- Pagination: Fix issue where PaginationPageText did not render the
  correct page range

`v3.1.1`

Compare Source

Patch Changes

#9128
0715e2c
Thanks @coverlv! - Fix issue where
useBreakpointValue throws error if ssr is false
#9103
1254769
Thanks @Newbie012! - - Checkbox: Fix issue
where checkmark doesn't show on Safari
- Alert: Fix issue where indicator icon is not visible on Safari
- ClientOnly: Fix issue where returned the incorrect type leading to TS
  error like ClientOnly cannot be used as a JSX component.
- Fieldset: Fix issue where anatomy is not exported
- Timeline: Refactor variants such that it responds to colorPalette

`v3.1.0`

Compare Source

Minor Changes

9a27c2c
Thanks @segunadebayo! - - System: Fix
issue where using as prop with logic based components doesn't work as
expected.
- DataList: Add support for bold variant.
- Button: Tweak the horizontal padding when size is sm.
- Snippets
  - Slider: Add showValue prop to render the text value of the slider.
  - Select
    - Add HiddenSelect to ensure it works in form submissions.
    - Fix type inference is lost when using SelectRoot component from
      snippet
    - Fix issue where form data is not populated when using native form
      element
  - ColorMode: Fix type error when using the latest next-themes.
  - Provider: Forward props to ColorModeProvider powered by next-themes
    for better customization.
- Toggle: Add Toggle component for toggling between two states. It
  composes the Button component.

`v3.0.2`

Compare Source

Patch Changes

20b91bd
Thanks @segunadebayo! - - InputAddon:
Fix issue with input addon not stretched correctly.
- Snippets / Toaster: Improve toaster styling by adding
  width={{ md: "sm" }} to the toast root.

`v3.0.1`

Compare Source

Patch Changes

c0020c9
Thanks @segunadebayo! - Fix issue where
using keyframe interpolation in animation prop doesn't work
7d4f898
Thanks @segunadebayo! - Fix issue where
scrollBehavior=outside doesn't allow scrolling outside the dialog content

`v3.0.0`

Major Changes

#8153
7b6e66a
Thanks @segunadebayo! - Prepares the ground
for the next version Chakra that leverages Ark UI.

User Facing
- Consolidate all component packages into a single package
- Remove all deprecated components and APIs
- Simplify the Changelogs for all v2 releases
Infrastructure
- Simplify the repo infrastructure and release process
- Migrate from jest to vitest
- Migrate from tsup to custom rollup setup for better bundling strategy
#8815
806be96
Thanks @isBatak! - Remove the @chakra-ui/hooks
package in favour of using dedicated, robust libraries like react-use and
usehooks-ts

Minor Changes

#8121
170198f
Thanks @kkieninger! - ### Fixed
- Fix hard-coded z-index for Menu in favor of one defined from the theme
- Fix problem with leading and trailing spaces when getting initials for the
  Avatar component
- Suppress unnecessary re-renders of Checkbox and Radio component

Added

Add CSS accentColor property to style props
Add support for asChild in chakra factory
Export toastStore from toast component
Upgrade framer-motion to allow for skipAnimations
Add component namespace to reduce imports and provide better composition
Modal, Drawer: Add default preserveScrollBarGap

Changed

Redesign the component themes and anatomy

192c6b1
Thanks @segunadebayo! - Add new fieldset
component
07b04b1
Thanks @segunadebayo! - - [NEW]: Add
RatingGroup, SegmentControl
- [NEW]: Add EmptyState component for empty states
- [NEW]: Add RadioCard and CheckboxCard components for card-based
  selection
#8568
5fd993b
Thanks @isBatak! - Add Collapsible recipe with
default open/close animation
3fc49ca
Thanks @segunadebayo! - Add support for
FormatNumber and FormatByte components

3ccbbdf
Thanks @segunadebayo! - ### Motion Styles

Add support for motionStyle props.

The idea is to pair them with text styles and layer styles to create this
three-part mixin that can make your styles a lot cleaner.

Motion styles focus solely on animations, allowing you to orchestrate
animation properties.

import { defineMotionStyles } from "@&#8203;chakra-ui/react"

export const motionStyles = defineMotionStyles({
  "slide-fade-in": {
    value: {
      transformOrigin: "var(--transform-origin)",
      animationDuration: "fast",
      "&[data-placement^=top]": {
        animationName: "slide-from-top, fade-in",
      },
      "&[data-placement^=bottom]": {
        animationName: "slide-from-bottom, fade-in",
      },
      "&[data-placement^=left]": {
        animationName: "slide-from-left, fade-in",
      },
      "&[data-placement^=right]": {
        animationName: "slide-from-right, fade-in",
      },
    },
  },
})

Built-in Keyframe Animations

Chakra new provides built-in keyframe animations that you can use to create
your own motion styles.

Slide: slide-from-top, slide-from-bottom, slide-from-left,
slide-from-right, slide-to-top, slide-to-bottom, slide-to-left,
slide-to-right

Slide Full: slide-from-top-full, slide-from-bottom-full,
slide-from-left-full, slide-from-right-full, slide-to-top-full,
slide-to-bottom-full, slide-to-left-full, slide-to-right-full

Fade: fade-in, fade-out

Scale: scale-in, scale-out

You can compose these animations using the animationName property in your
motion styles to create really cool animations. No JS required.

<Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>

3ccbbdf
Thanks @segunadebayo! - Add support for
built-in layer styles to help prototype faster with automatic dark mode.
Paired with colorPalette, you can create beautiful designs with little code
that adapts to dark mode automatically.

Fill Layer Styles: fill.muted, fill.solid, fill.surface
```
<Box layerStyle="fill.muted" colorPalette="red">
  This is a subtle fill layer
</Box>
```
Border Layer Styles: outline.muted, outline.solid
```
<Box layerStyle="outline.muted" colorPalette="red">
  This is a subtle outline layer
</Box>
```
Indicator Styles: indicator.top, indicator.end, indicator.bottom,
indicator.start
```
<Box layerStyle="indicator.top" colorPalette="red">
  This is a top indicator layer
</Box>
```
Disabled Styles: disabled
```
<Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>
```
You can combine these layer styles to create very complex designs with little
code.
```
<Box
  layerStyle="fill.muted"
  _hover={{ layerStyle: "outline.solid" }}
  colorPalette="red"
>
  This is a complex layer
</Box>
```
de9c0a0
Thanks @segunadebayo! - Add DataList
component
e77a9b8
Thanks @segunadebayo! - - Add new Timeline
component to presenting chronological information or activities.
- Trim generated className in the DOM.
- Add neutral status to Alert component
763329e
Thanks @segunadebayo! - Add preset and
preset-base entrypoints.
- The preset entrypoint exposes the default theme and recipes for Chakra.
- The preset-base entrypoint exposes the base utilities and conditions used
  internally.
925cfd9
Thanks @segunadebayo! - Add ActionBar,
Status, Rating, Pagination components
e9a1537
Thanks @segunadebayo! - BREAKING: Change
signature of useRecipe, useSlotRecipe, createSlotRecipeContext

createSlotRecipeContext

Before:

const { withProvider, withContext } = createSlotRecipeContext("accordion")

After:

const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})

useSlotRecipe

Before:

const recipe = useSlotRecipe("accordion")

After:

const recipe = useSlotRecipe({ key: "accordion" })

3908155
Thanks @segunadebayo! - Rename
createStyleContext to createSlotRecipeContext
c654ee3
Thanks @segunadebayo! - Improve performance
of styled components to avoid unneeded re-renders.
edec8f7
Thanks @segunadebayo! - Add clipboard
composition
5093e18
Thanks @segunadebayo! - Add cursor pointer
to button
4c6838c
Thanks @segunadebayo! - - Rename onLabel
and offLabel to trackLabel
- Add support for thumbLabel prop for rendering an icon within thumb
#8393
623e558
Thanks @segunadebayo! - - Integrate Ark UI
components to reduce maintenance surface.
- Add FileUpload component
- Remove trigger=hover in favor of HoverCard
- Replace Tooltip, Popover and HoverCard with those from Ark UI
945a777
Thanks @segunadebayo! - BREAKING: Integrate
Ark v4. This mostly affects the custom select component that requires the use
of createListCollection now.
c26acf0
Thanks @segunadebayo! - Add support for
cursor token type
55c0839
Thanks @segunadebayo! - Move the Prose
component to snippets so it can be customized by the user.
952647a
Thanks @segunadebayo! - Add CardTitle and
CardDescription components

f4762bf
Thanks @segunadebayo! - Add support for
merging multiple system configs into one within createSystem

Before:

const config = mergeConfigs(defaultConfig, customConfig)
export const system = createSystem(config)

After:

const system = createSystem(defaultConfig, customConfig)

#8218
a89c598
Thanks @segunadebayo! - Add support for
custom theme conditions or pseudo props via theme.conditions
```
// theme.ts

const theme = extendTheme({
  conditions: {
    _closed: "[data-state='closed']", // pseudo prop
  },
})
```
This allows you to use the pseudo prop in your components
```
<Box data-state="closed" _closed={{ bg: "red.200" }}>
  This box is closed
</Box>
```
For TypeScript users, you need to use the Chakra CLI to generate the types
for your custom conditions.
```
pnpm chakra-cli tokens src/theme/index.ts
```
c2f45ca
Thanks @segunadebayo! - Rename
Fieldset.Control to Fieldset.Content
1738b90
Thanks @segunadebayo! - - Icon: Set
asChild to true by default to reduce repetition
- All components
  - Ensure consistent sizing convention (units of 4px). Smaller elements start
    at 20px, larger elements start at 40px
  - Ensure focus ring matches the colorPalette
- Input, Textarea: Rename filled variant to subtle
- Tags: Add new Tag.StartElement and Tag.EndElement components to allow
  for easier styling of the start and end elements

3ccbbdf
Thanks @segunadebayo! - Redesign Stepper
component. It's now called Steps and manages the state internally, no need
to use useSteps anymore.

We've also improved the accessibility of the component by leveraging the tabs
pattern and adding the required ARIA attributes.

<Steps.Root defaultIndex={0} count={2}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>

    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Content index={0}>Step 1</Steps.Content>
  <Steps.Content index={1}>Step 2</Steps.Content>
  <Steps.CompleteContent>Complete</Steps.CompleteContent>
</Steps.Root>

Using the CLI, you can also scaffold an already composed stepper component

chakra composition add steps

548470d
Thanks @segunadebayo! - Add custom select
from Ark UI and design recipe
8b110da
Thanks @segunadebayo! - Support inlining
recipe in createRecipeContext and createSlotRecipeContext for better DX
whe

Configuration

📅 Schedule: Branch creation - "after 11pm,before 6am" in timezone Asia/Tokyo, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

vercel · 2022-08-07T18:08:03Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
my-nextjs-template	❌ Failed (Inspect)			Jan 24, 2025 4:35pm

github-actions · 2022-08-07T18:10:26Z

depcheck Result